<template>
	<view class="gui-padding" style="min-height:100vh; background-color:#F8F8F8;">

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view style="height:30rpx;"></view>
		<view>
			<text class="gui-h5 gui-color-gray gui-block-text">助教收藏</text>
		</view>
		
		<gui-empty v-if="collect_arr.length==0">
			<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
				<!-- 请根据您的项目要求制作并更换为空图片 -->
				<image class="gui-empty-img"
					:src="empty_img">
				</image>
			</view>
			<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
				>暂无数据</text>
		</gui-empty>
		
		<view class="gui-card-view gui-margin-top gui-box-shadow" v-for="(item,index) in collect_arr" :key="index">
			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
				<image :src="item.avatar_pic" class="gui-card-img"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name">{{item.nickname}}（{{item.identity}}）</text>
						<!-- <text class="gui-text-small gui-color-blue">补充信息</text> -->
					</view>
					<gui-tags text="空闲" bgClass="gui-bg-green" :size="22" :width="100"
						v-if="item.is_busy==0"></gui-tags>
					<gui-tags text="忙碌" bgClass="gui-bg-red" :size="22" :width="100" v-if="item.is_busy==1"></gui-tags>
					<view class="gui-margin-top">
						<gui-star activecolor="#FF0036" :totalstars="item.star" :starnum="item.star"
							:cantap="false"></gui-star>
					</view>
					<text class="gui-card-text gui-block-text"
						style="margin-top:10rpx;">最早可约：{{item.early_use_time}}</text>
					<text class="gui-card-text gui-block-text">{{item.money}}元/时</text>
				</view>
			</view>
			<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
				<!-- <text class="gui-icons gui-card-footer-item gui-border-r">&#xe7f8; 选择</text> -->
				<text class="gui-icons gui-card-footer-item gui-border-r"
					@tap="cancel_collect(item.teacher_id)">&#xe605; 取消收藏</text>
				<!-- <text class="gui-icons gui-card-footer-item">&#xe61e; 链接</text> -->
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				collect_arr: [],
				empty_img:this.empty_img
			}
		},
		onLoad: function() {
			this.$globalMethod();
			this.collect_list();
		},
		methods: {
			cancel_collect(teacher_id) {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.user/cancel_collect', //仅为示例，并非真实接口地址。
					data: {
						teacher_id: teacher_id
					},
					method: 'POST',
					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;

						uni.showToast({
							title: return_data.msg,
							duration: 2000
						});

						console.log(return_data);
						if (return_data.code == 0) {


							_this.collect_list();
						}
					}
				});
			},
			collect_list() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.user/my_collect_teacher_list', //仅为示例，并非真实接口地址。

					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.collect_arr = return_data.data;
						}
					}
				});
			}
		}
	}
</script>
<style>
	/* 卡片视图 */
	.gui-card-view {
		background-color: #FFFFFF;
		padding: 25rpx;
	}

	.gui-card-body {
		padding-bottom: 25rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888888;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #666666;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */
</style>